<template>
  <view class="my-page">
    <u-navbar
      title="小卡拉米的菜园子"
      left-icon=" "
      :title-style="{ 'font-weight': 'bold', 'font-size': '18px' }"
      fixed
      placeholder
      bg-color="transparent"
    ></u-navbar>
    <view class="user-info">
      <image
        v-if="userInfo.head"
        class="head-image"
        :src="userInfo.head"
      />
      <image
        v-else
        class="head-image"
        src="https://www.xnbz.site/static/user.jpg"
        @click="handleLoginClick"
      />
      <view v-if="isLogin">
        <text class="user-name-phone">
          {{ userInfo.username }}
        </text>
      </view>
      <view
        v-else
        @click="handleLoginClick"
      >
        <text class="user-name">未登录</text>
        <text class="login-tips">点此登录</text>
      </view>
    </view>
    <view class="list-box">
      <template v-for="menu in menus">
        <view
          v-if="!menu.needLogin || isLogin"
          :key="menu.label"
          class="list-item"
          @click="handleMenuItemClick(menu)"
        >
          <image
            :src="menu.icon"
            class="item-icon"
          />
          <text class="item-label">{{ menu.label }}</text>
          <image
            src="/static/icon_arrow_right.png"
            class="arrow-right"
          />
        </view>
      </template>
    </view>
  </view>
</template>

<script>
// import { hostPrefix } from '@/config'

export default {
  name: 'MyPage',
  data() {
    return {
      menus: [
        {
          icon: '/static/icon_order.png',
          label: '购物车',
          callback: () => {
            this.navigateToOrder()
          },
        },
        {
          icon: '/static/icon_order.png',
          label: '好物记',
          callback: () => {
            this.navigateToGood()
          },
        },
        {
          icon: '/static/icon_order.png',
          label: '厨房日志',
          callback: () => {
            this.navigateToCook()
          },
        },
        {
          icon: '/static/icon_order.png',
          label: '逐鹿记',
          callback: () => {
            this.navigateToTrack()
          },
        },
        {
          icon: '/static/icon_order.png',
          label: '计划篇',
          callback: () => {
            this.navigateToPlan()
          },
        },
        {
          icon: '/static/icon_order.png',
          label: '随身记',
          callback: () => {
            this.navigateToBasket()
          },
        },
      ],
      logoutVisible: false,
    }
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: `小卡拉米的菜园子`,
      path: `/pages/my/my`,
    }
  },
  computed: {
    // 用户基本信息
    userInfo() {
      return this.$store.getters.userInfo
    },
    // 是否登录
    isLogin() {
      console.log('this.$store.getters.userInfo', this.$store.getters.userInfo)
      return this.$store.getters.userInfo.username
      // return false
    },
  },
  mounted() {},
  onShow() {
    const _this = this
    uni.login({
      async success(data) {
        if (data.code) {
          const openidRes = await _this.$request.get(`/wx/getOpenid`, {
            params: {
              code: data.code,
            },
          })
          if (openidRes.data.code !== 200) {
            if (!openidRes.data.openid) {
              uni.showToast({
                title: openidRes.data.msg,
                icon: 'none',
              })
              return
            }
          }
          const res = await _this.$request.get(`/user/getInfo`, {
            params: {
              openid: openidRes.data.openid,
            },
          })
          if (res.data._doc && res.data._doc.us) {
            _this.$store.commit('user/setUserInfo', {
              username: res.data._doc && res.data._doc.us,
            })
            uni.$emit('loginSuccess')
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
            })
          }
        } else {
          console.log('获取信息失败！' + data.errMsg)
        }
      },
    })
  },
  methods: {
    // 登录点击事件
    handleLoginClick() {
      this.handleLogin()
    },
    // 跳转登录
    handleLogin() {
      uni.navigateTo({
        url: '/pages/login/login',
      })
    },
    // 菜单点击
    handleMenuItemClick({ callback }) {
      callback && callback()
    },
    navigateToOrder() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/list/list`,
      })
    },
    navigateToGood() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/goodlist/list`,
      })
    },
    navigateToCook() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/cooklist/list`,
      })
    },
    navigateToTrack() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/tracklist/list`,
      })
    },
    navigateToPlan() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/planlist/list`,
      })
    },
    navigateToBasket() {
      if (!this.isLogin) {
        this.handleLogin()
        return
      }
      uni.navigateTo({
        url: `/pages/basketlist/list`,
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @themcolor: #ff6a00;
@themcolor: rgb(255, 106, 0);

.my-page {
  height: 100%;
  background: linear-gradient(to bottom, #f3faff 0%, #f7f7f7 70%, #f7f7f7 100%);
  .user-info {
    padding: 20px 20px 29px;
    display: flex;
    align-items: center;
    .head-image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .user-name {
      margin-left: 16px;
      color: #000000;
      font-weight: 500;
      font-size: 18px;
      margin-bottom: 4px;
    }
    .user-name-phone {
      margin-left: 16px;
      color: #000000;
      font-weight: 400;
      font-size: 15px;
      margin-bottom: 4px;
      display: block;
    }

    .login-tips {
      margin-left: 16px;
      display: block;
      font-size: 15px;
      color: @themcolor;
      line-height: 21px;
    }
  }
  .list-box {
    padding: 0 16px;
    .list-item {
      padding: 0 16px;
      height: 60px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      background-color: #ffffff;
      margin-top: 16px;
      .item-icon {
        width: 24px;
        height: 24px;
        margin-right: 7px;
      }
      .item-label {
        color: #000000;
        font-weight: 400;
        font-size: 16px;
        flex: 1;
      }
      .arrow-right {
        width: 12px;
        height: 13px;
      }
    }
  }
  .logout-tip-text {
    font-size: 4.8vw;
    line-height: 1.4;
  }
  /* modal 弹窗按钮样式 */
  .u-modal__button-group__wrapper__text {
    font-size: 4.8vw !important;
  }
}
</style>
